<template>
  <div>
    <div class="nav-box">
      <div class="nav-message search_tit">
        <i class="icon iconfont icon-left" @click="goBack()"></i>
      </div>
      <div class="div-bor">
        <!-- <i class="icon iconfont icon-search"></i>
        <input type="text" class="user" placeholder="拖鞋"/>-->
        <p>
          <b>购物车（{{ Object.keys(this.products).length }}）</b>
        </p>
      </div>
      <div class="nav-cart">
        <p>
          <span @click='flag=!flag' v-show='!flag'>编辑</span>
          <span @click='flag=!flag' v-show='flag'>撤销</span>
          <i class="icon iconfont icon-message"></i>
        </p>
      </div>
      <div class="nav-full"></div>
    </div>
    <ViewScroll class="cart-box">
      <div class="card">
        <div class="shop_full"></div>
        <div class="shopping_information" v-for="(v,i) in products" :key="i">
          <div class="shopping_left">
            <div class="shopping_checkout">
              <input type="checkbox" :id="i" :value='i' v-model='checkedArr'/>
              <label :for="i"></label>
            </div>
          </div>
          <div class="shopping_middle">
            <div class="shopping_shopImg">
              <img :src="v.img" alt />
            </div>
          </div>
          <div class="shopping_right">
            <div>
              <div class="right_top">
                <div class="Cart_desc">
                  <p>{{ v.title }}</p>
                </div>
              </div>
              <div class="right_bottom">
                <div class="bottom_top">
                  <p>商铺：{{ }}</p>
                </div>
                <div class="bottom_bottom">
                  <p class="price_left">
                    <span class="now_price">￥{{ v.price }}</span>
                    <span class="old_price">￥{{ v.orgPrice }}</span>
                  </p>
                  <p class="price_right" v-show='!flag'>
                    <span class='shop_count'>x{{ v.count }}</span>
                  </p>
                  <div class='shoppingCount' v-show='flag'>
                      <button class="cut" @click="cuts()">-</button>
                      <input type="text" name="" class="shopCount" v-model='v.count'>
                      <!-- <span class='shopCount'>{{ v.count }}</span> -->
                      <button class="add" @click="add()">+</button>
                  </div>
                  <div class='delete_shop'>
                       <button type="button" class="btn btn-danger" v-show='flag'>删除</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="shop_full"></div>
      </div>
    </ViewScroll>
    <div class="bottom_bar">
      <!-- 全选按钮 -->
      <div class="cart_checkout">
        <div class="checkout_all">
          <div class="all_checkout">
            <input type="checkbox" value="5" id="check_all" v-model='checkoutAll' @click='checkAll()'/>
            <label for="check_all"></label>
          </div>
          <div class="all_title">
            <span class="all_count">全选({{ len }})</span>
            <span class="all_price">￥{{ allPirce }}</span>
          </div>
        </div>
      </div>
      <!-- 结算 -->
      <div class="cart_settle">
        <div class="settle_button">
          <button type="button" class="btn btn-default" v-show='!flag'>去结算</button>
          <button type="button" class="btn btn-default" v-show='flag'>删除全部</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState,mapActions } from 'vuex'

export default {
  data(){
    return {
      flag:false,
      checkoutAll:false,
      checkChlid:[],
      checkedArr:[],
      len:0
    }
  },
  watch:{
    checkedArr: function() {
			if (this.checkedArr.length == this.checkChlid.length) {
        this.checkoutAll = true
        this.len = Object.keys(this.products).length;
			} else {
        this.checkoutAll = false
        this.len = this.checkedArr.length
			}
		}
  },
  computed: {
    ...mapState(['products']),
    allPirce(){
            let money = 0;
            for( let value in this.products){
                if(!this.products[value].checkoutAll){
                    // 
                    console.log(1);
                }
                money += this.products[value].count * this.products[value].price
                    console.log(this.products[value].count)
                console.log(money);
                // console.log(value);
            }

            return money;
        }
  },
  methods: {
     ...mapActions(["loadCartData"]),
    goBack() {
      this.$router.back();
    },
    checkAll(){
      console.log(Object.keys(this.products).length);
      // this.checkoutAll = true;
    if (!this.checkoutAll) {
        this.checkedArr = this.checkChlid
        this.len = Object.keys(this.products).length;
			} else {
        this.checkedArr = [];
        this.len = 0;
			}
    },
    cuts(){
      console.log(this.v);
      // if(e<1){
      //   return
      // }else{
      //   // this.products
      //   console.log(this.v);
      // }
    },
    add(){
      // console.log(e);
    }
    
  },
  mounted() {
    this.$store.dispatch("loadCartData");
    for( let value in this.products){
        this.checkChlid.push(value);
    }
  }
};
</script>
<style lang="less" scoped>
.nav-box {
  position: fixed;
  width: 100vw;
  height: 100px;
  display: flex;
  flex-flow: row nowrap;
  border-bottom: #dedede;
  background: white;
  z-index: 99;
  //   justify-content: space-between;
  border: 1px solid #dedede;

  .nav-message {
    // float: left;
    width: 150px;
    height: 100%;
    text-align: center;
    line-height: 100px;
  }
  .nav-cart {
    width: 150px;
    height: 100%;
    text-align: center;
    line-height: 100px;
    .icon-message {
      padding-left: 20px;
    }
  }
  .div-bor {
    // float: left;
    flex-grow: 1;
    display: flex;
    justify-content: space-around;
    position: relative;
    width: 300px;
    padding-top: (100px-50px)/2;
    font-size: 35px;

    .icon-search {
      width: 50px;
      height: 50px;
      padding-top: 25px;
      position: absolute;
      left: 35px;
      top: 10px;
      z-index: 5;
      background-position: 0px 0px;
    }
    .user {
      //   float: right;

      width: 80%;
      height: 50px;
      background: #dedede;
      border: none;
      border-radius: 12px;
      padding-left: 50px;
      outline: none;
      //   box-sizing: border-box
    }
  }
}
.cart-box {
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
  // overflow-y: auto;
  overflow: hidden;
}
.card {
  width: 100%;
  //   border:1px solid red;
  box-sizing: border-box;
  .shop_full {
    // width: 100%;
    height: 100px;
  }
  .shopping_information {
    // width: 100%;
    height: 250px;
    //   border: 1px solid red;
    border-bottom: 1px solid #dedede;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .shopping_left {
      width: 10%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .shopping_checkout {
        width: 50px;
        height: 50px;
        position: relative;
        overflow: hidden;
      }
      .shopping_checkout input[type="checkbox"] {
        display: none;
      }
      .shopping_checkout label {
        display: inline-block;
        width: 60px;
        height: 60px;
        /* border: 1px solid black; */
        cursor: pointer;
        background-image: url("../../public/checkbox.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position-y: -62px;
      }
      .shopping_checkout input[type="checkbox"]:checked + label {
        background-position-y: 0px;
      }
    }
    .shopping_middle {
      width: 20%;
      // height: 100%;
      // border: 1px solid red;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      .shopping_shopImg {
        width: 95%;
        object-fit: contain;
        object-position: center;
        //   height: 95%;

        img {
          width: 100%;
          // height: 100%;
        }
      }
    }
    .shopping_right {
      width: 70%;
      height: 100%;
      // border:1px solid cyan;
      .right_top {
        width: 95%;
        height: 100px;
        // border:1px solid blue;
        // box-sizing: border-box;
        padding: 10px 10px;
        .Cart_desc {
          font-size: 25px;
          text-align: left;
          color: #515271;
        }
      }
      .right_bottom {
        width: 100%;
        height: 100px;
        // padding: 10px 10px;
        .bottom_top {
          width: 80%;
          height: 50%;
          font-size: 16px;
          color: #999;
          text-align: left;
          padding-left: 10px;
        }
        .bottom_bottom {
          display: flex;
          justify-content: space-between;
          width: 90%;
          height: 50%;
          .price_left {
            float: left;

            .now_price {
              // font-size: 25px;
              font-weight: bold;
              text-align: left;
              //   margin-right: 20px;
              padding: 0px 20px 0 10px;
            }
            .old_price {
              font-size: 16px;
              color: #999;
              text-decoration: line-through;
            }
          }
          .price_right {
            // float: right;
            position: fixed;
            right:100px;
          }
          .shoppingCount{
            display: flex;
            position: fixed;
            right:150px;
            // padding-left:50px;
            .shopCount{
              width:60px;
              padding-left:15px;
              border:none;
            }
            .cut,.add{
              width:50px;
              height:50px;
              border-radius: 5px;
              border:none;
            }
          }
          .delete_shop{
            .btn-danger{
              height:50px;
              font-size: 20px;
              // line-height: 50px;
              display: flex;
              justify-content: center;
              align-items: center;
              // padding:0px;
            }
          }
        }
      }
    }
  }
}
.bottom_bar {
  position: fixed;
  // margin-top:100px;
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0px;
  z-index: 99;
  background-color: #ffffff;
  border-top: 1px solid #dedede;
  text-align: center;
  color: #000;
  .cart_checkout {
    width: 60%;
    height: 100%;
    // border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
    .checkout_all {
      width: 90%;
      height: 90%;
      //   border: 1px solid red;
      text-align: left;
      display: flex;
      align-items: center;
      .all_checkout {
        width: 50px;
        height: 50px;
        // border:1px solid red;
        // background:url('../../public/checkbox.png');
        position: relative;
        overflow: hidden;
        // display: flex;
        // align-items: center;
        img {
          width: 100%;
          position: absolute;
          left: 0px;
          transform: translateY(-62px);
        }
      }
      .all_checkout input[type="checkbox"] {
        display: none;
      }
      .all_checkout label {
        display: inline-block;
        width: 60px;
        height: 60px;
        /* border: 1px solid black; */
        cursor: pointer;
        background-image: url("../../public/checkbox.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position-y: -62px;
      }
      .all_checkout input[type="checkbox"]:checked + label {
        background-position-y: 0px;
      }
      .all_title {
        margin-left: 10px;
        .all_price {
          margin-left: 30px;
          color: #f34b70;
        }
      }
    }
  }
  .cart_settle {
    width: 40%;
    height: 100%;
    // border: 1px solid green;
    display: flex;
    justify-content: center;
    align-items: center;
    .settle_button {
      width: 80%;
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn-default {
        background-color: #f34b70;
        border: none;
        color: #ffffff;
      }
      //   .btn-block{
      //       height: 80px;
      //     //   line-height: 70px;
      //   }
    }
  }
}
</style>